<template>
    <div class="seckill">
        <div class="seckill_top">
            <div class="seckill_menu">
                <div class="seckill_go_back" @click="back"></div>
                <div class="seckill_name"></div>
                <div class="seckill_more"></div>
            </div>
            <div class="seckill_time">
                <ul>
                    <li v-for="(item, index) in times" :key="index" @click="getList(item.id)">
                        <div :class="[killId == item.id ? 'active': '','time']" v-text="item.time"></div>
                        <div :class="killId == item.id ? 'statea': 'statec'" v-text="item.status"></div>
                    </li>                                                                                       
                </ul>
                 <div class="clear"></div>    
            </div>
            <div class="kill_list">
                <ul>
                    <li v-for="(items, index) in list" :key="index" @click="toDetail(items.id,items.is_start)">
                        <div class="kill_img">
                            <img :src="items.pict_url">
                        </div>
                        <div class="kill_info">
                            <div class="kill_title" v-text="items.title"></div>
                            <div class="kill_store">
                                <span v-text="items.user_type==0?'淘宝':'天猫'"></span>{{items.shop_title}}
                            </div>
                            <div class="kill_tick">
                                <div class="kill_aword"><span>奖 ¥{{items.reward_price}}</span></div>
                                <div class="kill_sale">销量{{items.volume}}</div>
                            </div>
                            <div class="kill_price">
                                <div class="price_now"><small>¥</small><span class="price_exp" v-text="items.coupon_price"></span>券后</div>
                                <div class="price_old">￥{{items.zk_final_price}}</div>
                                <div class="price_quan"><span class="num" v-text="items.coupon_money"></span>元券</div>
                            </div>
                        </div>
                    </li>             
                </ul>
                    <div v-if="load" class="loader">正在加载中...</div>  
                    <div v-if="bottom" class="bottom">已经到底啦</div> 
            </div>
        </div> 
        <temp_top></temp_top> 
    </div>
</template>
<script>
import  temp_top from './common.vue'
    export default {
        name: 'Seckill',
        data () {
             return {
                times:"",
                killId:1,
                page:1,
                limit:20,
                list:"",
                load:false,
                bottom:false,
             }
        },
        methods:{
            back(){
                this.$router.go(-1); 
            },
            getList(e){
                this.killId=e;
                //获取列表
                this.$axios.get("/v1/common/itemList",{
                    params: {
                        kill_id: this.killId,
                        page:this.page,
                        limit:this.limit,
                    }
                }).then(res => {
                    if(res.data.code==200){
                        var data=res.data.data;
                        this.list=data;
                        this.scroll(this.list);
                    }else{
                      Toast(res.data.msg);
                    }    
                }, res => {
                    console.log("error");
                }); 
            },
            toDetail(e,f){
                if(f==1){
                   this.$router.push({path:'/detail',query:{id:e}});   
                }   
            },
            scroll(goods) {
                let flag = false;
                window.onscroll = () => {
                    let top = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条在Y轴上的滚动距离
                    let vh = document.compatMode == 'CSS1Compat' ? document.documentElement.clientHeight : document.body.clientHeight; // 浏览器视口的高度
                    let height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); // 文档的总高度
                    let bottomOfWindow =top + vh >= height;
                    if(bottomOfWindow&&flag==false){
                        flag=true;
                        this.page++;
                            var that = this;
                            that.load=true;
                            var params = {
                                    page: that.page,
                                    kill_id: that.killId,
                                    limit:that.limit,
                            }
                            this.$axios.get( //传参发起请求
                                '/v1/common/itemList', {
                                     params
                                }
                            ).then(function (response) { //接口返回数据
                               var data=response.data.data;
                                if(data.length<=0){
                                    that.bottom=true;
                                    that.load=false;
                                }else{
                                    for(var i =0;i<data.length;i++){
                                        goods.push(data[i]);
                                    };
                                    that.load=false;
                                    flag=false;
                                }

                            }, response => {
                                console.log("error");
                            });
                        }
                }
            },
        },
        created(){
           
                     
        },
        components:{
            "temp_top":temp_top,
        },
        beforeRouteEnter (to, from, next) {
            if ( from.name === 'Detail') {
              to.meta.isUseCache = true;
            } else {
              to.meta.isUseCache = false;
            }
            next()
        },
        activated() {
             document.title="今日秒杀";  
            if(!this.$route.meta.isUseCache){
                this.times="";
                this.killId=1;
                this.page=1;
                this.limit=20;
                this.list="";
                this.load=false;
                this.bottom=false;
                this.$axios.get("/v1/common/getKillTime").then(res => {
                    if(res.data.code==200){
                        var data=res.data.data;
                        for(var i=0;i<data.length;i++){
                            if(data[i].type==2){
                                this.killId=data[i].id;
                            }
                        }
                        this.times=data;
                    }else{
                    Toast(res.data.msg);
                    }    
                }, res => {
                    console.log("error");
                }); 
                //获取列表
                this.$axios.get("/v1/common/itemList",{
                    params: {
                        kill_id: this.killId,
                        page:this.page,
                        limit:this.limit,
                    }
                }).then(res => {
                    if(res.data.code==200){
                        var data=res.data.data;
                        this.list=data;
                        this.scroll(this.list);
                    }else{
                    Toast(res.data.msg);
                    }    
                }, res => {
                    console.log("error");
                });
            }
        }        
    }
</script>
<style scoped>
.seckill_top{width:100%;height:384px;background:url(/static/images/seckill.png) no-repeat center center;background-size:100% 100%;padding-top:30px;}
.seckill_menu{display: flex;flex-direction: row;justify-content: space-between;width:698px;margin:0 auto;}
.seckill_menu .seckill_go_back{width:48px;height:48px;background:url(/static/images/team_go_back.png) no-repeat center center;background-size:100% 100%;}
.seckill_menu .seckill_name{font-size:34px;color:#333334;font-weight:600;}

.seckill_time{width:698px;margin:0 auto;margin-top:54px;}
.seckill_time li{float: left;width:98px;height:84px;text-align: center;margin-right:52px;}
.seckill_time li:last-child{margin-right:0;}
.seckill_time li .time{font-size:32px;color:#FFF;}
.seckill_time li .statec{font-size:24px;color:#FFF;margin-top:12px;}
.seckill_time li .time.active{color:#333334;font-size:36px;}
.seckill_time li .statea{font-size:24px;color:#333334;font-weight:bold;margin-top:6px;}
.kill_list{margin-top:56px;}
.kill_list ul{width:698px;margin:0 auto;}
.kill_list li{display: flex;flex-direction: row;justify-content: space-between;border:2px solid #E4E4E4;border-radius:40px;background:#FFF;margin-bottom:20px;}
.kill_list .kill_img{width:284px;height:284px;}
.kill_list .kill_img img{width:100%;height:100%;border-radius:40px 0px 0px 40px;}
.kill_info{margin-left:16px;width:408px;}
.kill_info .kill_title{color:#000000;font-size:28px;font-weight:600;margin-bottom:12px;margin-top:28px;height:78px;overflow: hidden;}
.kill_info .kill_store{color:#333334;font-size:24px;}
.kill_info .kill_store span{color:#FFF;background:#FF2741;font-size:18px;padding:2px 6px;border-radius:8px;margin-right:16px;}
.kill_info .kill_tick{display: flex;flex-direction: row;justify-content: space-between;margin-top:26px;}
.kill_info .kill_tick .kill_aword span{padding:2px 8px;text-align:center;font-size:20px;color:#FF0000;border:2px solid #FF0000;border-radius:4px;}
.kill_info .kill_tick .kill_sale{color:#9B9B9B;font-size:24px;margin-right:18px;}
.kill_price{display: flex;flex-direction: row;justify-content: space-between;margin-top:20px;}
.kill_price .price_now{font-size:24px;color:#FF0000;height:40px;overflow: hidden;}
.price_now .price_exp{font-size:32px;color:#FF0000;margin:0 8px 0 6px;font-weight:600;}
.kill_price .price_old{font-size:20px;color:#9B9B9B;text-decoration: line-through;line-height:50px;}
.kill_price .price_quan{width:144px;height:60px;line-height:60px;text-align:center;background:#FFE514;border-radius:24px 0px 36px 0px;color:#000;font-size:24px;}
.kill_price .price_quan .num{font-size:32px;color:#000;margin-right:6px;}
.loader{font-size:24px;line-height:80px;text-align: center;width:100%;}
.bottom{font-size:24px;line-height:80px;text-align: center;width:100%;}
</style>